<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        #box{width: 150px;height: 150px;background-color: red;border: 10px solid #000;-display:none;}
        /* #box1{position: relative;top: 500px;left: 500px;} */
        .wrap{padding: 20px;}
        .wrap1{background-color: red;position: relative;}
        .wrap2{background-color: yellow;position: relative;}
        .wrap3{background-color: green;}
    </style>
</head>
<body class="body">
    <div id="box">绝对定位</div>
    <div id="box1">相对定位</div>
    <div class="wrap wrap1">
        wrap1
        <div class="wrap wrap2">
            wrap2
            <div class="wrap wrap3">
                wrap3
            </div>
        </div>
    </div>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        // .height()返回元素的高度,不包括padding,border ,即使元素隐藏依然获取到的
        // .width()返回元素的宽度
        // offset()此方法仅对可见的元素有效,传递参数,设置高度
        // $(元素).offset().top 获取元素的绝对定位\
        // $(元素).offset().left 获取元素的绝对定位
        // position()返回第一个匹配元素相对于xx父元素xx的位置. ps:只能读不能写
        // offsetParent()返回最近的已定位祖先元素,定位元素指的是元素的css的postion的值
        // 被设置为relative,absolut,fixed的元素.,
        // 如果父级没有定位则返回html,此方法仅对可见的元素有效

        $(function(){
            // alert($("#box").height())
            // alert($("#box").offset().top);
            // 设置
            // $("#box").offset({"left":200,"top":400})      
            // alert ( $("#box1").position().top)
            alert($(".wrap3").offsetParent().attr("class"))
        })
    </script>
</body>
</html>